
<script lang="ts" setup>
const themeColor: ITheme = themeStore().theme;
import { themeStore, ITheme } from "../store/modules/theme";
import {
  ComponentInternalInstance,
  getCurrentInstance,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  watch,
  defineProps,
  provide,
} from "vue";
import { marked } from "marked";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const state = reactive({
  messageList: [],
  consultationList: [],
});
const emits = defineEmits(["listenPrintHtml"]);
const getMessageList = (id: string) => {
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/getSessionQAList", {
      requestId: id,
      sessionId: ''
    })
    .then((res: any) => {
      if (res.code === 200) {
        state.messageList = res.data;
        if(res.data[0].questionType === 4){
          res.data.unshift({
            text: res.data[0].questionContent,
            type: 0
          });
        }
        if(res.data[0].questionType === 6){
          res.data.unshift({
            text: res.data[0].questionContent,
            img: res.data[0].resourceFile,
            type: 6
          });
        }
        setOldSession(res.data);
      }
    });
};
const setOldSession = (data: any) => {
  let list = data;
  let classification: any = [];
  for (let j = 0; j < list.length; j++) {
    let i = list[j];
    if (i.type === 1 || i.questionType === 1) {
      let arr = i.classContent?.split("|") || [];
      for (let j = 0; j < arr.length; j++) {
        arr[j] = arr[j].replace(/all/g, "**联系人**");
        arr[j] = proxy?.$utils.phoneReg(arr[j], arr[j].requestId);
        let seconed = marked(arr[j]);
        arr[j] = seconed;
      }
      classification = arr;
      let html = i.answerContent;
      html = proxy?.$utils.phoneReg(html, i.requestId) || html;
      if (classification.length > 0) {
        i.classification = classification;
      }
      i.answerContent = marked(html);
      i.answerRaw = JSON.parse(i.answerRaw);
      i.printEnd = true;
      i.activeNames = [];
      i.activeNames1 = [];
    }
  }

  state.consultationList = list;
  window.scrollTo(0, document.body.scrollHeight);
};
onMounted(() => {
  let params: any = proxy?.$utils.getUrlParam();
  proxy?.$utils.setCheckDomColor(".main-container", "background", "#F1F8FE");
  if (params.requestId) {
    getMessageList(params.requestId);
  }
  if(params.email) {
    themeStore().setCount(params.email || "");
  }
});
const isMobile = function () {
  const userAgent = navigator.userAgent.toLowerCase();
  return /iphone|ipod|android|windows phone|blackberry|bb10|mobi|xoom|tablet|mobile/i.test(
    userAgent
  );
};
const bindClick = (e:string) => {
    // localStorage.setItem('isPreview', JSON.stringify(true));
    // localStorage.setItem('sessionId', JSON.stringify(state.consultationList .length > 0 ?state.consultationList[0].sessionId : ''));
    if(isMobile()) {
      if(process.env.NODE_ENV === 'development') {
          
      } else if(process.env.NODE_ENV === 'test') {
          location.href = `${process.env.VUE_APP_BASE_API}AIBackend/Api/wechatApi/authorize`;
      } else {
          location.href = `${process.env.VUE_APP_BASE_API}AIBackend/Api/wechatApi/authorize`;
      }
    } else {
      if(process.env.NODE_ENV === 'development') {
          
      } else if(process.env.NODE_ENV === 'test') {
          location.href = `${process.env.VUE_APP_BASE_API}AIBackend/Api/wechatApi/authorizeAAD`;
      } else {
          location.href = `${process.env.VUE_APP_BASE_API}AIBackend/Api/wechatApi/authorizeAAD`;
      }
    }
    
}
</script>

<template>
  <div class="assistant-container">
    <div class="bg">
        <div class="top-con" id="top-con">
        <div class="header">
          <div class="header-name">
            <van-icon @click="bindClick" name="wap-home-o" style="font-size: 26px;" />
            <span>至一AI助手</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content consultation-mode" ref="scrollContainer">
      <div class="consultation-container">
        <template v-for="(item, index) in state.consultationList" :key="index">
          <div class="item itema" v-if="item.type === 0">
            <div class="con">
              <div class="con-text fs-28" v-html="item.text"></div>
            </div>
            <div class="file-qa" v-if="item.type === 6">
              <img :src="item.img" />
            </div>
          </div>
          <div
            class="item itemb"
            v-if="item.type === 1 || item.questionType"
          >
            <div class="ai-icon">
              <img class="avatar" src="@/assets/images/robot1.png" />
              <span>至一AI助手</span>
            </div>
            <div class="con">
              <div class="con-text fs-28" v-html="item.answerContent"></div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="footer-button">
        <div class="footer-button-content" @click="bindClick">
            和 至一AI助手 一起聊聊吧
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  width: 100%;
  background-size: cover;
  height: 140px;
  position: fixed;
  top: 0;
  z-index: 101;
  background: linear-gradient(
    152.42deg,
    rgba(92, 178, 255, 1) 17.78%,
    rgba(255, 177, 177, 1) 100%
  );
}
.assistant-container{
    background: #F1F8FE;
    min-height: 100vh;
}
.content {
  display: flex;
  margin-top: 24px;
  width: 100%;
  flex-direction: column;
  background: v-bind("themeColor.fillWhite");
  padding: 0 30px;
  border-radius: 24px;
  
  &.consultation-mode {
    background: none;
    padding: 0;
    border-radius: 0;
    border-radius: 20px;
    padding: 36px 0 24px;
    height: 83vh;
    overflow-y: scroll;
    margin: 0 30px;
    z-index: 100;
    width: calc(100% - 60px);
    margin-top: 48px;
    padding-top: 160px;
    position: relative;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .consultation-container {
    display: flex;
    flex-direction: column;

    .item.itemb {
      // padding: 0 0.533rem 0 0.587rem;
      flex-direction: column;
      position: relative;
      .ai-icon {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        span {
          font-size: 28px;
          font-weight: 500;
          color: v-bind("themeColor.textColorGrey");
          line-height: initial;
          margin-left: 26px;
          vertical-align: bottom;
        }
      }
      .avatar {
        margin: 0;
      }
      .con {
          border-radius: 0px 10px 10px 10px;
          background: v-bind("themeColor.fillWhite");
          box-shadow: 0px 0px 4px v-bind("themeColor.fillBlueLight");
        }
    }
    .item.itema {
      padding: 0 0.533rem 0 0.587rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .file-qa {
        text-align: right;
        width: 100%;
        overflow: hidden;

        img {
          width: 60%;
        }
      }
      .con {
        border-radius: 20px 20px 0px 20px;
        background: v-bind("themeColor.fillColor");
        color: v-bind("themeColor.textColorLightest");
      }
    }
    .item {
      display: flex;
      justify-content: flex-end;
      margin-top: 40px;
      &:first-child {
        margin-top: 0;
      }
      .module-type {
        margin-top: 24px;
        span {
          margin-right: 24px;
          font-size: 28px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 58px;
          color: rgba(148, 162, 176, 1);
          padding: 16px 50px;
          border-radius: 220px;
          background: rgba(240, 241, 242, 1);
        }
        span.active {
          background: rgba(219, 238, 255, 1);
          color: #5cb2ff;
        }
      }
      .avatar {
        margin-left: 16px;
        width: 51.6px;
        margin-right: 16px;
      }
      .con {
          max-width: 100%;
          display: flex;
          flex-direction: column;
          padding: 24px 20px 22px 22px;
          border-radius: 24px;
          color: v-bind("themeColor.textColor");
          // box-shadow: 0px 0px 8px v-bind("themeColor.shadowColor");
          font-size: 28px;
          overflow: hidden;
          .con-text {
            display: flex;
            flex-direction: column;
            // white-space: pre-wrap;
            overflow: hidden;
            ref {
              color: #999;
            }

            .docname {
              font-size: 24px;
              color: v-bind("themeColor.textColor");
            }
            span {
              font-size: 28px;
            }
          }
          .con-file {
            display: flex;
            flex-direction: column;

            margin-top: 20px;
            gap: 6px;
            .fromto {
              color: v-bind("themeColor.textColorLighten");
            }
            .file-item {
              margin: 4px 0px;
              word-break: break-all;
              color: v-bind("themeColor.textColor");
              &.active {
                color: #5cb2ff;
              }
              div:last-child {
                margin-top: 20px;
              }
              a {
                text-decoration: underline;
                color: #5cb2ff;
              }
              .iconfont {
                color: #5cb2ff;
                margin-right: 4px;
              }
            }
          }
          .con-opt {
            display: flex;
            justify-content: space-between;
            padding: 18px 0 0 0;
            .left {
              img {
                width: 36px;
                margin-right: 45px;
              }
              span {
                margin-left: 68px;
                &:first-child {
                  margin-left: 0;
                }
                &.icon-good-a-copy,
                &.icon-quxiaodianzan-a-copy {
                  color: #e97600;
                }
              }
            }
            .right {
              img {
                width: 36px;
                margin-left: 45px;
              }
            }
          }
        }
      &:nth-child(2n) {
        justify-content: flex-start;
        .avatar {
          margin-left: 16px;
        }
      }
    }
  }
}
.top-con {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    margin: 0 auto;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32px;
      font-weight: 900;
      letter-spacing: 0px;
      margin: 43px 0;
      z-index: 2;
      color: #ffffff;
      .header-name {
        display: flex;
        gap: 20px;
        img {
          object-fit: contain;
        }
      }
      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
      }
    }
  }
.footer-button{
    position: fixed;
    bottom: 5%;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 24px 0;
    background: linear-gradient(152.42deg, rgb(92, 178, 255) 17.78%, rgb(255, 177, 177) 100%);
    color: #ffffff;
    border-radius: 60px;
    z-index: 100;
}
</style>
